<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>注册</title>
    <style>
        /* 样式与登录表单一致 */
        .modal {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.4);
        }

        .modal-content {
            background-color: #fefefe;
            margin: 15% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
        }

        .container {
            padding: 16px;
        }

        .cancelbtn {
            width: auto;
            padding: 10px 18px;
            background-color: #f44336;
        }
    </style>
</head>
<body>
<button onclick="openRegisterForm()">注册</button>
<div id="registerForm" class="modal">
    <form class="modal-content" action="/register" method="post">
        <div class="container">
            <label for="username"><b>用户名</b></label>
            <input type="text" placeholder="输入用户名" name="username" required>

            <label for="password"><b>密码</b></label>
            <input type="password" placeholder="输入密码" name="password" required>

            <label for="confirm_password"><b>确认密码</b></label>
            <input type="password" placeholder="再次输入密码" name="confirm_password" required>

            <button type="submit">注册</button>
        </div>

        <div class="container" style="background-color:#f1f1f1">
            <button type="button" onclick="closeRegisterForm()" class="cancelbtn">取消</button>
        </div>
    </form>
</div>

<script>
    function openRegisterForm() {
        document.getElementById("registerForm").style.display = "block";
    }

    function closeRegisterForm() {
        document.getElementById("registerForm").style.display = "none";
    }
</script>
</body>
</html>
